<template>
    <div style="margin-top: 75px">
        <h3>各个价格区间总销量对比</h3>
        <div id="thisYear" style="width: 100%;height:400px; margin-top: 75px;"></div>
    </div>
</template>

<script>
    export default{
        data() {
            return {}
        },
        mounted() {
            this.setChart();
        },
        methods: {
            setChart() {
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                }).then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let thisYear = this.$echarts.init(document.getElementById('thisYear'));
                        // 指定图表的配置项和数据
                        console.log(data);
                        let series = data['series'];
                        let names=series.map(e=>e['name'])
                        let datas = series.map(e => e['data'][0]);
                        console.log(names);
                        console.log(datas);
                        let option = {
                            xAxis: {
                                type: 'category',
                                data: names,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: datas,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(220, 220, 220, 0.8)'
                                }
                            }]
                        };
                        thisYear.clear();
                        thisYear.setOption(option);
                        window.addEventListener('resize', function () {
                            thisYear.resize()
                        });
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                });
            },
        },
    }
</script>

<style scoped>

</style>